<template>
	<div class="wrapper">
		<el-row>
			<el-col :span="24">
				<common-card>
					<template #header>
						<div style="font-family: Roboto-Thin; padding: 20px; color: #fff">
							<span style="font-size: 20px; display: inline-block; width: 100%">员工列表</span>
							<span style="font-size: 14px; display: inline-block; width: 100%; margin-top: 10px">所有员工</span>
						</div>
					</template>
					<template #main>
						<el-row style="margin-bottom: 15px" type="flex" align="middle">
							<el-button class="btn" type="primary" plain icon="el-icon-plus" circle size="mini" @click="addStaff"/>
							<el-input
								clearable
								size="mini"
								class="tableSearch"
								@change="searchNyName"
								placeholder="search by name"
								prefix-icon="el-icon-search"
								v-model="search">
							</el-input>
						</el-row>
						<el-table
							v-loading="tableLoading"
							:max-height="height"
							:data="tableData"
							stripe
							style="width: 100%">
							<el-table-column
								prop="name"
								label="员工姓名">
							</el-table-column>
							<el-table-column
								prop="age"
								label="员工年龄">
							</el-table-column>
							<el-table-column
								prop="sex"
								label="员工性别">
							</el-table-column>
							<el-table-column
								prop="deptName"
								label="所属部门">
							</el-table-column>
							<el-table-column
								label="操作"
								width="180">
								<template slot-scope="scope">
									<el-button
										@click="editStaff(scope.row)"
										icon="el-icon-setting"
										type="primary"
										plain
										circle
										size="small">
									</el-button>
									<el-button
										@click="deleteStaff(scope.row)"
										icon="el-icon-delete"
										type="danger"
										plain
										circle
										size="small">
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</template>
				</common-card>
			</el-col>
		</el-row>
		<add-dialog :dialog-visible="isAdd" :is-edit="isEdit" @closeDialog="isOpenDialog(false)" :staff-data="departmentData" @fresh="fetchAllStaff"/>
	</div>
</template>

<script>
  import CommonCard from '../../components/Cards/CommonCard';
  import addDialog from './addDialog'
  import * as staffManage from '@/api/staffManage';

  export default {
    name: 'index',
    components: {
      CommonCard,
      addDialog,
    },
    data () {
      return {
        total: 0,
        currentPage: 1,
        departmentData: {},
        search: '',
        tableLoading: true,
        height: '',
        isAdd: false,
        isEdit: false,
        tableData: []
      }
    },
    methods: {
      async searchNyName (name) {
        if (name) {
          const res = await staffManage.fetchStaffByName({ name });
          this.tableData = res.msg;
        } else {
          this.fetchAllStaff();
        }
      },
      addStaff () {
        this.isOpenDialog(true, false);
      },
      async deleteStaff (data) {
        try {
          await this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          });
          await staffManage.deleteStaff({ id: data.id });
          this.$notify({
            title: '信息',
            type: 'success',
            message: '删除成功!'
          });
          await this.fetchAllStaff();
        } catch (e) {
          console.log(e)
        }
      },
      async fetchAllStaff () {
        try {
          this.tableLoading = true
          const res = await staffManage.fetchStaffList({ name: '' });
          this.tableData = res.msg;
        } catch (e) {
          console.log(e)
        } finally {
          this.tableLoading = false;
        }
      },
      async editStaff (data) {
        try {
          this.departmentData = data;
          this.isOpenDialog(true, true);
        } catch (e) {
          console.log(e);
        }
      },
      isOpenDialog (isOpen, isEdit) {
        this.isAdd = isOpen;
        this.isEdit = isEdit;
      }
    },
    created () {
      this.height = window.innerHeight - 150;
      this.fetchAllStaff();
    }
  }
</script>

<style scoped>
  .wrapper {
    padding: 0 15px;
  }
  .tableSearch {
    width: 221px;
  }
  .tableSearch >>> .el-input__inner {
    border-radius: 415px;
  }
  .btn {
    margin-right: 7px;
  }
</style>